<template>
  <div class="app-container">
    <!-- 添加或修改家政人员对话框 -->
    <el-row :gutter="20" style="margin-top: 12px">
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-divider content-position="center">家政人员基本信息</el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="人员姓名">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="手机号码">
            <span>{{ form.phone }}</span>
          </el-form-item>
          <el-form-item label="证件照">
            <img style="width:100px" :src=form.iconUrl alt="">
          </el-form-item>
          <el-form-item label="地区" prop="addressList">
            <span>{{ form.addressOneStr }}-{{ form.addressTwoStr }}-{{ form.addressThreeStr }}-{{ form.addressFourStr }}</span>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressDetail">
            <span>{{ form.addressDetail }}</span>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthData">
            <span>{{ form.birthData }}</span>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <span>{{ form.age }}</span>
          </el-form-item>
          <el-form-item label="性别" prop="addressOneId">
            <span v-if="form.sex == 0">男</span>
            <span v-if="form.sex == 1">女</span>
          </el-form-item>
          <el-form-item label="工作年限" prop="yearNum">
            <span>{{ form.yearNum }}</span>
            <!-- <el-input v-model="form.yearNum" placeholder="请输入工作年限" /> -->
          </el-form-item>
          <el-form-item label="服务内容" prop="yearNum">
            <span v-if="this.zuo">{{ zuo }},</span>
            <span v-if="this.jia">{{ jia }},</span>
            <span v-if="this.zhao">{{ zhao }},</span>
            <span v-if="this.lao">{{ lao }},</span>
          </el-form-item>
          <el-form-item label="服务类型" prop="addressOneId">
            <span>{{ form.serveTypeName }}</span>
            <span style="margin-left: 20px" v-if="form.serveMoney">{{ form.serveMoney }} 元</span>
          </el-form-item>
          <el-form-item label="个人展示" prop="serveMoney">
            <span>{{ form.explainStr }}</span>
          </el-form-item>
          <el-form-item label="">
            <div v-for="(item,index) in form.imgUrlList" :key="index">
              <img :src=item alt="" style="width: 50px;height: 50px">
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-divider content-position="center">家政人员工作经历信息</el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-table :data="historyList" :row-class-name="rowJzLaborerHistoryIndex"
            @selection-change="handleJzLaborerHistorySelectionChange" ref="jzLaborerHistory">
            <el-table-column label="工种" prop="laborerTypeStr" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="开始时间" prop="timeStart" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="结束时间" prop="timeEnd" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="工作内容" prop="historyDetail" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-divider content-position="center">家政人员预约时间设置</el-divider>
        <div class="timesss" v-for="(item,index) in form.timesList" :key="index">
          <span>
            {{ item }}
          </span>
        </div>
        <div style="margin-top: 100px; margin-left: 200px">
          <el-button @click="cancel">返 回</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    listLaborer,
    getLaborer,
    delLaborer,
    addLaborer,
    updateLaborer,
    getregion
  } from "@/api/system/laborer";
  export default {
    name: "Laborer",
    data() {
      return {
        imgurl: 'http://192.168.31.230:8080',
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            console.log(node)
            const {
              level
            } = node;
            let data = []
            let id = 0
            console.log(level)
            if (level != 0) {
              id = node.value
            }
            getregion(id).then(res => {
              res.rows.map(item => {
                let obj = {
                  value: item.id,
                  label: item.name,
                }
                data.push(obj)
              })
              resolve(data);
            });
          }
        },
        xingbietypes: [{
          value: '0',
          label: '男'
        }, {
          value: '1',
          label: '女'
        }],
        fuwutypes: [{
          value: '1',
          label: '住家'
        }, {
          value: '2',
          label: '白班'
        }, {
          value: '3',
          label: '钟点工'
        }],
        checkboxGroup1: ['上海'],
        cities: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
          '17:00', '18:00',
          '19:00', '20:00', '21:00', '22:00', '23:00'
        ],
        cityarr: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 子表选中数据
        checkedJzLaborerHistory: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 家政人员表格数据
        laborerList: [],
        // 家政人员工作经历表格数据
        historyList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          phone: null,
          serveType: null,
        },
        querysele: '',
        house: '',
        // 表单参数
        form: {
          timesList: [],
          serveMoney: ''
        },
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }],
        },
        zuo: '',
        jia: '',
        zhao: '',
        lao: ''
      };
    },
    created() {
      this.form.id = this.$route.query.id
      this.getdet()
    },
    methods: {
      getdet() {
        const id = this.form.id
        getLaborer(id).then(response => {
          // console.log(response)
          response.data.contentsList.forEach(item => {
            if (item == 1) {
              this.zuo = '做饭'
            } else if (item == 2) {
              this.jia = '做家务'
            } else if (item == 3) {
              this.zhao = '照顾小孩'
            } else if (item == 4) {
              this.lao = '照顾老人'
            }
          });
          this.form = response.data;
          this.form.imgUrlList = response.data.imgUrlList.split(',')
          // console.log(this.form.imgUrlList)
          this.historyList = response.data.historyList;
        });
      },
      handleChange(value) {
        console.log(value);
      },
      handleChange(value) {
        console.log(value);
      },
      /** 查询家政人员列表 */
      getList() {
        this.loading = true;
        listLaborer(this.queryParams).then(response => {
          this.laborerList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        //   this.open = false;
        this.reset();
        this.$router.push({
          path: '/housekeep'
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          phone: null,
          addressOneId: null,
          addressOneStr: null,
          addressTwoId: null,
          addressTwoStr: null,
          addressThreeId: [],
          addressThreeStr: null,
          addressDetail: null,
          birthData: null,
          age: null,
          sex: null,
          yearNum: null,
          sort: null,
          iconUrl: null,
          serveType: null,
          serveTypeName: null,
          serveMoney: null,
          serveMoneyStr: null,
          tel: null,
          status: 0,
          createId: null,
          createTime: null,
          updateId: null,
          updateTime: null,
          delFlag: null
        };
        this.historyList = [];
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加家政人员";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getLaborer(id).then(response => {
          this.form = response.data;
          this.historyList = response.data.historyList;
          this.open = true;
          this.title = "修改家政人员";
        });
      },
      /** 家政人员工作经历序号 */
      rowJzLaborerHistoryIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
      /** 家政人员工作经历添加按钮操作 */
      handleAddJzLaborerHistory() {
        let obj = {};
        obj.laborerTypeStr = "";
        obj.timeStart = "";
        obj.timeEnd = "";
        obj.historyDetail = "";
        obj.createId = "";
        obj.updateId = "";
        this.historyList.push(obj);
      },
      /** 家政人员工作经历删除按钮操作 */
      handleDeleteJzLaborerHistory() {
        if (this.checkedJzLaborerHistory.length == 0) {
          this.$modal.msgError("请先选择要删除的家政人员工作经历数据");
        } else {
          const historyList = this.historyList;
          const checkedJzLaborerHistory = this.checkedJzLaborerHistory;
          this.historyList = historyList.filter(function(item) {
            return checkedJzLaborerHistory.indexOf(item.index) == -1
          });
        }
      },
      /** 复选框选中数据 */
      handleJzLaborerHistorySelectionChange(selection) {
        this.checkedJzLaborerHistory = selection.map(item => item.index)
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/laborer/export', {
          ...this.queryParams
        }, `laborer_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style>
  .timesss {
    width: 100%;
    margin: 0 auto;
  }

  .timesss .el-checkbox-group {
    width: 90%;
    margin: 0 auto;
    /* text-align: center; */
  }

  .el-checkbox-button__inner {
    border: 1px solid #ccc;
    margin-right: 10px;
    margin-top: 10px;
  }

  .el-input-number {
    width: 130px;
  }
</style>
